define(function(require, exports) {
	var pubjs = require('pubjs');
	var util = require('util');
	var view = require('@base/view');
	var $ = require('jquery');

	// dashboard趋势图, 左侧带有汇总数据
	var Base = view.container.extend({
		init: function(config) {
			config = pubjs.conf(config, {
				'class': 'M-trend',
				module: '@base/echarts.line',
				color: ['#2EC7C9', '#B6A2DE', '#5AB1EF', '#3EC7EE', '#66D99F', '#D79ED8', '#FF6D37'],
				theme: 'macarons',
				limit: 10,
				xField: {
					field: 'date',
					format: function(val) {
						return String(val || '').replace(/^\d{4}\-?(\d{2})\-?(\d{2}).*$/, '$1月$2日');
					}
				},
				yField: [],
				build:  {
					// 关闭拖拽重计算，去除饼图外的边框线
					calculable: false,
					// 关闭工具栏
					toolbox: {
						show: false
					},
					legend: {
						x: 'center',
						y: 'bottom'
					},
					grid: {
						x: 60,
						y: 25,
						x2: 60,
						y2: 70,
						borderWidth: 0
					},
					series: {
						markPoint : {
							show: false
						},
						markLine : {
							show: false
						},
						smooth: false
					},
					xAxis: {
						// 横轴刻度
						axisTick: {
							lineStyle: {
								color: '#CCC'
							}
						},
						// 横轴轴线
						axisLine: {
							lineStyle: {
								color: '#E9E9E9'
							}
						},
						// 横轴上的纵向分割线
						splitLine: {
							show: false
						},
						// 标记显示间隔
						axisLabel: {
							interval: 0
						}
					},
					yAxis: [
						{
							// 纵轴轴线
							axisLine: {
								lineStyle: {
									color: '#B6A2DE'
								}
							},
							// 纵轴上的横向分割线
							splitLine: {
								show: false
							},
							// 分割区域背景
							splitArea: {
								show: false
							},
							axisLabel : {
								formatter: function(value) {
									return Math.round(value / 1e4) + '万';
								}
							}
						},
						{
							// 纵轴轴线
							axisLine: {
								lineStyle: {
									color: '#2EC7C9'
								}
							},
							// 纵轴上的横向分割线
							splitLine: {
								show: false
							},
							// 分割区域背景
							splitArea: {
								show: false
							}
						}
					]
				},

				url: '',
				data: null,
				param: null,
				auto_load: true,
				reqType: "websocket",
				reqMethod: "get"
			});

			this.$amounts = [];
			this.Super('init', arguments);
		},
		afterBuild: function() {
			var that = this;
			var container = that.getDOM();
			var c = that.getConfig();
			$([
				'<div class="M-trendAmount"></div>',
				'<div class="M-trendChart"></div>'
			].join('')).appendTo(container);

			var doms = that.$doms = {
				amount: container.find('.M-trendAmount'),
				chart: container.find('.M-trendChart')
			};

			that.buildAmount();

			that.createDelay('chart', c.module, {
				el: doms.chart,
				theme: c.theme,
				xField: c.xField,
				yField: c.yField,
				build: c.build
			});

			that.createDelay(true, function() {
				if (c.url && c.auto_load) {
					that.load();
				} else if (c.data) {
					that.setData(c.data);
				}
			});

		},
		buildAmount: function() {
			var c = this.getConfig();
			var doms = this.$doms;
			var yField = [].concat(c.yField);
			var height = 1 / yField.length * 100 + '%';
			util.each(yField, function(field, index) {
				var elm = $([
					'<div class="M-trendAmountItem">',
						'<div class="M-trendAmountItemContent">',
							'<div class="M-trendAmountItemLabel"></div>',
							'<div class="M-trendAmountItemValue">-</div>',
							'<div class="M-trendAmountItemArrow"></div>',
						'</div>',
					'</div>'
				].join('')).appendTo(doms.amount);

				var item = {
					field: field,
					name: field.field,
					item: elm,
					label: elm.find('.M-trendAmountItemLabel'),
					value: elm.find('.M-trendAmountItemValue')
				};
				this.$amounts.push(item);

				elm.css({height: height});
				item.label.text(field.text);
				item.value.css('color', c.color[index]);
			}, this);
			return this;
		},
		reset: function() {
			this.$data = null;
			this.$.chart.reset();
			util.each(this.$amounts, function(item) {
				item.value.text('-');
			});
			return this;
		},
		setParam: function(param, replace) {
			var c = this.getConfig();
			c.param = replace ? param : util.extend(c.param, param);
			return this;
		},
		load: function() {
			var c = this.getConfig();
			if (c.url) {
				pubjs.loading.show();
				switch(c.reqType){
					case 'ajax':
						pubjs.data[c.reqMethod](c.url, c.param, this, 'onData');
					break;
					case 'websocket':
						pubjs.mc.send(c.url, c.param, this.onData.bind(this));
					break;
				}
			}
			return this;
		},
		onData: function(err, data) {
			pubjs.loading.hide();

			if (err) {
				return pubjs.alert(err.message);
			}

			this.setData(data || {});
		},
		getData: function() {
			return this.$data;
		},
		setData: function(data) {
			var c = this.getConfig();
			this.$data = data;
			var ud;
			var items = data.items.slice(0, c.limit || ud);

			var chartData = items;
			if (chartData && chartData.length == 1)
			{
				chartData = chartData.concat(chartData);
			}
			this.$.chart.setData(chartData);

			// 如果没返回汇总数据，则自己计算
			var amount = data.amount;
			if (!amount) {
				amount = this.getAmoutData(items);
			}

			util.each(this.$amounts, function(item) {
				var format = item.field.format;
				var value = amount[item.name];
				if (format) {
					value = format.call(this, value, amount, c)
				}
				item.value.text(util.numberFormat(value));
			}, this);
			return this;

		},
		// 计算汇总数据
		getAmoutData: function(items) {
			var amount = {};
			var c = this.getConfig();
			util.each(items, function(item) {
				util.each([].concat(c.yField), function(field) {
					amount[field.field] = (amount[field.field] || 0) + item[field.field];
				});
			});
			return amount;
		}
	});
	exports.base = Base;
});